initial commit

1 files changed, 423 insertions, 0 deletions

diff --git a/pages/manga/chapter/[chapter].js b/pages/manga/chapter/[chapter].js
new file mode 100644
index 0000000..8d2a5a1
--- /dev/null
+++ b/pages/manga/chapter/[chapter].js
@@ -0,0 +1,423 @@
+import axios from "axios";
+import Head from "next/head";
+import { useEffect, useState } from "react";
+import Navbar from "../../../components/navbar";
+import Footer from "../../../components/footer";
+import ScrollTracker from "../../../components/scrollTracker";
+
+export default function Test({ title, id, aniId, data, provider }) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [datas, setData] = useState(data);
+  const [currentChapter, setCurrentChapter] = useState(null);
+  const [nextChapter, setNextChapter] = useState(null);
+  const [prevChapter, setPrevChapter] = useState(null);
+
+  useEffect(() => {
+    function storedData() {
+      const nowChap = localStorage.getItem("currentChapterId");
+      const chapt = localStorage.getItem("chapters");
+      const chapters = JSON.parse(chapt);
+      const currentChapter = chapters.find((chapter) => chapter.id === nowChap);
+      const currentIndex = chapters.findIndex(
+        (chapter) => chapter.id === nowChap
+      );
+
+      const nextIndex = currentIndex + 1;
+
+      const nextChapter = chapters[nextIndex];
+      const prevIndex = currentIndex - 1;
+
+      setNextChapter(nextChapter);
+      setCurrentChapter(currentChapter);
+      setPrevChapter(chapters[prevIndex]);
+      setIsLoading(false);
+    }
+    storedData();
+  }, []);
+
+  function getNextChapter() {
+    window.scrollTo(0, 0);
+    setIsLoading(true);
+    const currentId = localStorage.getItem("currentChapterId");
+    const scrollData = JSON.parse(localStorage.getItem("watchedManga")) || [];
+    const scroll = localStorage.getItem("scrollPercentage");
+    if (scroll >= 5) {
+      const existingDataIndex = scrollData.findIndex(
+        (data) => data.id === currentId
+      );
+      if (existingDataIndex !== -1) {
+        // Update existing data
+        scrollData[existingDataIndex].timestamp = Date.now();
+        scrollData[existingDataIndex].percentage = parseFloat(
+          localStorage.getItem("scrollPercentage")
+        );
+      } else {
+        // Add new data
+        scrollData.push({
+          timestamp: Date.now(),
+          percentage: parseFloat(localStorage.getItem("scrollPercentage")),
+          id: currentId,
+        });
+      }
+
+      localStorage.setItem("watchedManga", JSON.stringify(scrollData));
+
+      const chapt = localStorage.getItem("chapters");
+      const chapters = JSON.parse(chapt);
+
+      const currentIndex = chapters.findIndex(
+        (chapter) => chapter.id === currentId
+      );
+
+      const nextIndex = currentIndex + 1;
+
+      const nextChapter = chapters[nextIndex];
+      const nexttChapter = chapters[nextIndex + 1];
+      const prevChapter = chapters[nextIndex - 1];
+
+      setNextChapter(nexttChapter);
+      setCurrentChapter(nextChapter);
+      setPrevChapter(prevChapter);
+
+      if (!nextChapter) {
+        return;
+      }
+
+      fetch(
+        `https://api.moopa.my.id/meta/anilist-manga/read?chapterId=${nextChapter.id}&provider=${provider}`
+      )
+        .then((response) => response.json())
+        .then((data) => {
+          if (provider === "mangakakalot") {
+            const datas = data.map((item) => ({
+              img: `https://api.consumet.org/utils/image-proxy?url=${item.img}&referer={Referer:'https://mangakakalot.com/'}`,
+              page: item.page,
+              title: item.title,
+            }));
+            // console.log(datas);
+            setData(datas);
+          } else {
+            setData(data);
+          }
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+
+      // Update the current chapter id in local storage
+      localStorage.setItem("currentChapterId", nextChapter.id);
+    }
+
+    const chapt = localStorage.getItem("chapters");
+    const chapters = JSON.parse(chapt);
+
+    const currentIndex = chapters.findIndex(
+      (chapter) => chapter.id === currentId
+    );
+
+    const nextIndex = currentIndex + 1;
+
+    const nextChapter = chapters[nextIndex];
+    const nexttChapter = chapters[nextIndex + 1];
+    const prevChapter = chapters[nextIndex - 1];
+
+    setNextChapter(nexttChapter);
+    setCurrentChapter(nextChapter);
+    setPrevChapter(prevChapter);
+
+    if (!nextChapter) {
+      return;
+    }
+
+    fetch(
+      `https://api.moopa.my.id/meta/anilist-manga/read?chapterId=${nextChapter.id}&provider=${provider}`
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        if (provider === "mangakakalot") {
+          const datas = data.map((item) => ({
+            img: `https://api.consumet.org/utils/image-proxy?url=${item.img}&referer={Referer:'https://mangakakalot.com/'}`,
+            page: item.page,
+            title: item.title,
+          }));
+          // console.log(datas);
+          setData(datas);
+        } else {
+          setData(data);
+        }
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+
+    // Update the current chapter id in local storage
+    localStorage.setItem("currentChapterId", nextChapter.id);
+  }
+  // console.log(data);
+
+  function getPrevChapter() {
+    // Get the current id
+    window.scrollTo(0, 0);
+    setIsLoading(true);
+
+    const currentId = localStorage.getItem("currentChapterId");
+    const scrollData = JSON.parse(localStorage.getItem("watchedManga")) || [];
+    const scroll = localStorage.getItem("scrollPercentage");
+    if (scroll >= 5) {
+      const existingDataIndex = scrollData.findIndex(
+        (data) => data.id === currentId
+      );
+      if (existingDataIndex !== -1) {
+        // Update existing data
+        scrollData[existingDataIndex].timestamp = Date.now();
+        scrollData[existingDataIndex].percentage = parseFloat(
+          localStorage.getItem("scrollPercentage")
+        );
+      } else {
+        // Add new data
+        scrollData.push({
+          timestamp: Date.now(),
+          percentage: parseFloat(localStorage.getItem("scrollPercentage")),
+          id: currentId,
+        });
+      }
+
+      localStorage.setItem("watchedManga", JSON.stringify(scrollData));
+
+      const chapt = localStorage.getItem("chapters");
+      const chapters = JSON.parse(chapt);
+
+      const currentIndex = chapters.findIndex(
+        (chapter) => chapter.id === currentId
+      );
+
+      const nextIndex = currentIndex + 1;
+
+      const nextChapter = chapters[nextIndex];
+      const nexttChapter = chapters[nextIndex + 1];
+      const prevChapter = chapters[nextIndex - 1];
+
+      setNextChapter(nexttChapter);
+      setCurrentChapter(nextChapter);
+      setPrevChapter(prevChapter);
+
+      if (!nextChapter) {
+        return;
+      }
+
+      fetch(
+        `https://api.moopa.my.id/meta/anilist-manga/read?chapterId=${nextChapter.id}&provider=${provider}`
+      )
+        .then((response) => response.json())
+        .then((data) => {
+          if (provider === "mangakakalot") {
+            const datas = data.map((item) => ({
+              img: `https://api.consumet.org/utils/image-proxy?url=${item.img}&referer={Referer:'https://mangakakalot.com/'}`,
+              page: item.page,
+              title: item.title,
+            }));
+            // console.log(datas);
+            setData(datas);
+          } else {
+            setData(data);
+          }
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+
+      // Update the current chapter id in local storage
+      localStorage.setItem("currentChapterId", nextChapter.id);
+    }
+
+    const chapt = localStorage.getItem("chapters");
+    const chapters = JSON.parse(chapt);
+
+    const currentIndex = chapters.findIndex(
+      (chapter) => chapter.id === currentId
+    );
+
+    const prevIndex = currentIndex - 1;
+
+    const prevChapter = chapters[prevIndex];
+    const nextChapter = chapters[prevIndex + 1];
+    const prevvChapter = chapters[prevIndex - 1];
+    setCurrentChapter(prevChapter);
+    setNextChapter(nextChapter);
+    setPrevChapter(prevvChapter);
+
+    fetch(
+      `https://api.moopa.my.id/meta/anilist-manga/read?chapterId=${prevChapter.id}&provider=${provider}`
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        // console.log(data);
+        if (provider === "mangakakalot") {
+          const datas = data.map((item) => ({
+            img: `https://api.consumet.org/utils/image-proxy?url=${item.img}&referer={Referer:'https://mangakakalot.com/'}`,
+            page: item.page,
+            title: item.title,
+          }));
+          // console.log(datas);
+          setData(datas);
+        } else {
+          setData(data);
+        }
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+
+    // Update the current chapter id in local storage
+    localStorage.setItem("currentChapterId", prevChapter.id);
+  }
+  // console.log({ PREV_CHAPTER: prevChapter });
+  // console.log({ CURRENT_CHAPTER: currentChapter });
+  // console.log({ NEXT_CHAPTER: nextChapter });
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="info" content="More detailed info about the Manga" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/c.svg" />
+      </Head>
+      <Navbar />
+      <ScrollTracker data={currentChapter} id={aniId} />
+
+      <div className="flex h-full min-h-screen w-screen flex-col items-center text-white">
+        <div className="lg:pt-nav pt-5 text-3xl font-semibold">
+          {isLoading ? (
+            <div />
+          ) : currentChapter && currentChapter.chapter ? (
+            <p>Chapter {currentChapter.chapter}</p>
+          ) : (
+            <p>{currentChapter.title}</p>
+          )}
+        </div>
+
+        {isLoading ? (
+          <p className="pt-nav">Loading...</p>
+        ) : (
+          <div className="pointer-events-none z-10 flex min-h-screen w-screen flex-col items-center pt-nav">
+            {datas.length > 0 &&
+              datas.map((item, index) => (
+                <img
+                  draggable={false}
+                  key={index}
+                  src={item.img}
+                  alt={`Page ${item.page}`}
+                />
+              ))}
+          </div>
+        )}
+        {isLoading ? (
+          <div />
+        ) : (
+          <>
+            <div className="sticky bottom-9 z-40 my-5 mr-[20rem] flex gap-6 lg:mr-0 lg:gap-10">
+              <div
+                className={`cursor-pointer rounded-md bg-[#121212] p-2 text-center text-xl hover:bg-[#2d303a] ${
+                  prevChapter ? `` : `pointer-events-none`
+                }`}
+                onClick={getPrevChapter}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth="1.5"
+                  stroke={`${prevChapter ? `currentColor` : `#919191`}`}
+                  className="h-6 w-6"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M15.75 19.5L8.25 12l7.5-7.5"
+                  />
+                </svg>
+              </div>
+              <div
+                className={`cursor-pointer ${
+                  nextChapter ? `` : `pointer-events-none`
+                } rounded-md bg-[#121212] p-2 text-center text-xl hover:bg-[#2d303a]`}
+                onClick={getNextChapter}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  strokeWidth="1.5"
+                  stroke={`${nextChapter ? `currentColor` : `#919191`}`}
+                  className={`h-6 w-6`}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                  />
+                </svg>
+              </div>
+            </div>
+
+            <div className="z-30 w-screen bg-[#1e2023] px-5 py-[3px] text-xl lg:w-[30%]  lg:bg-transparent lg:text-center">
+              {nextChapter ? (
+                nextChapter.chapter ? (
+                  <p>Next Chapter {nextChapter.chapter}</p>
+                ) : (
+                  <p>Next Chapter {nextChapter.title}</p>
+                )
+              ) : (
+                <p>End of Chapter</p>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+export async function getServerSideProps(context) {
+  const { id, title, provider, aniId } = context.query;
+  const urls = [
+    `https://api.moopa.my.id/meta/anilist-manga/read?chapterId=${id}&provider=${provider}`,
+  ];
+  const results = await axios.get(urls);
+
+  if (provider === "mangakakalot") {
+    const data = results.data;
+    const datas = data.map((item) => ({
+      img: `https://api.consumet.org/utils/image-proxy?url=${item.img}&referer={Referer:'https://mangakakalot.com/'}`,
+      page: item.page,
+      title: item.title,
+    }));
+    return {
+      props: {
+        aniId,
+        id,
+        title,
+        data: datas,
+        provider,
+      },
+    };
+  }
+
+  if (!results.data) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: {
+      aniId,
+      id,
+      title,
+      data: results.data,
+      provider,
+    },
+  };
+}